<template>
  <view class="test-container">
    <!-- 顶部信息 -->
    <view class="header-section">
      <view class="header-content">
        <view class="back-btn" @click="goBack">
          <text class="iconfont icon-arrow-left"></text>
        </view>
        <text class="header-title">权限测试</text>
      </view>
    </view>

    <!-- 当前用户信息 -->
    <view class="user-info-section">
      <view class="user-card">
        <image class="user-avatar" :src="userInfo.avatar" mode="aspectFill"></image>
        <view class="user-details">
          <text class="user-name">{{ userInfo.name }}</text>
          <view class="user-role">
            <text class="role-badge" :style="{ backgroundColor: roleInfo.color }">{{ roleInfo.displayName }}</text>
          </view>
          <text class="user-department">{{ userInfo.department }}</text>
        </view>
      </view>
    </view>

    <!-- 权限测试 -->
    <view class="permission-test">
      <text class="section-title">权限测试</text>
      
      <!-- 页面权限测试 -->
      <view class="test-section">
        <text class="test-title">页面权限测试</text>
        <view class="test-list">
          <view class="test-item" v-for="(page, index) in pageTests" :key="index">
            <text class="test-name">{{ page.name }}</text>
            <text class="test-result" :class="page.hasPermission ? 'success' : 'error'">
              {{ page.hasPermission ? '有权限' : '无权限' }}
            </text>
          </view>
        </view>
      </view>

      <!-- 操作权限测试 -->
      <view class="test-section">
        <text class="test-title">操作权限测试</text>
        <view class="test-list">
          <view class="test-item" v-for="(operation, index) in operationTests" :key="index">
            <text class="test-name">{{ operation.name }}</text>
            <text class="test-result" :class="operation.hasPermission ? 'success' : 'error'">
              {{ operation.hasPermission ? '有权限' : '无权限' }}
            </text>
          </view>
        </view>
      </view>

      <!-- 状态权限测试 -->
      <view class="test-section">
        <text class="test-title">状态权限测试</text>
        <view class="test-list">
          <view class="test-item" v-for="(status, index) in statusTests" :key="index">
            <text class="test-name">{{ status.name }}</text>
            <text class="test-result" :class="status.hasPermission ? 'success' : 'error'">
              {{ status.hasPermission ? '有权限' : '无权限' }}
            </text>
          </view>
        </view>
      </view>

      <!-- 数据过滤测试 -->
      <view class="test-section">
        <text class="test-title">数据过滤测试</text>
        <view class="test-list">
          <view class="test-item" v-for="(data, index) in dataTests" :key="index">
            <text class="test-name">{{ data.name }}</text>
            <text class="test-result" :class="data.hasPermission ? 'success' : 'error'">
              {{ data.hasPermission ? '有权限' : '无权限' }}
            </text>
          </view>
        </view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="action-section">
      <button class="action-btn primary-btn" @click="switchRole">
        切换角色
      </button>
      <button class="action-btn secondary-btn" @click="refreshTest">
        刷新测试
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { 
  ROLES, 
  getUserRole, 
  getRoleDisplayName, 
  getRoleColor,
  hasPagePermission,
  hasOperationPermission,
  hasStatusPermission,
  hasDocumentPermission,
  permissionManager
} from '../../utils/permission.js'

// 响应式数据
const userInfo = reactive({
  name: '张经理',
  avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=80&h=80&fit=crop&crop=face',
  department: '采购部',
  role: getUserRole()
})

const roleInfo = computed(() => {
  return {
    displayName: getRoleDisplayName(userInfo.role),
    color: getRoleColor(userInfo.role)
  }
})

// 页面权限测试
const pageTests = computed(() => [
  {
    name: '首页',
    hasPermission: hasPagePermission('home')
  },
  {
    name: '车辆列表',
    hasPermission: hasPagePermission('vehicle-list')
  },
  {
    name: '流程监控',
    hasPermission: hasPagePermission('monitor')
  },
  {
    name: '权限管理',
    hasPermission: hasPagePermission('permission')
  }
])

// 操作权限测试
const operationTests = computed(() => [
  {
    name: '新增车辆',
    hasPermission: hasOperationPermission('create')
  },
  {
    name: '编辑车辆',
    hasPermission: hasOperationPermission('edit')
  },
  {
    name: '删除车辆',
    hasPermission: hasOperationPermission('delete')
  },
  {
    name: '查看报告',
    hasPermission: hasOperationPermission('view', 'report')
  }
])

// 状态权限测试
const statusTests = computed(() => [
  {
    name: '采购中',
    hasPermission: hasStatusPermission('purchasing')
  },
  {
    name: '检测中',
    hasPermission: hasStatusPermission('inspecting')
  },
  {
    name: '过户中',
    hasPermission: hasStatusPermission('transferring')
  },
  {
    name: '运输中',
    hasPermission: hasStatusPermission('shipping')
  }
])

// 数据权限测试
const dataTests = computed(() => [
  {
    name: '基础资料',
    hasPermission: hasDocumentPermission('basic')
  },
  {
    name: '检测报告',
    hasPermission: hasDocumentPermission('inspection')
  },
  {
    name: '过户资料',
    hasPermission: hasDocumentPermission('transfer')
  },
  {
    name: '物流资料',
    hasPermission: hasDocumentPermission('logistics')
  }
])

// 方法
const goBack = () => {
  uni.navigateBack()
}

const switchRole = () => {
  const roles = Object.values(ROLES)
  const currentIndex = roles.indexOf(userInfo.role)
  const nextIndex = (currentIndex + 1) % roles.length
  userInfo.role = roles[nextIndex]
  
  // 更新本地存储
  uni.setStorageSync('userInfo', { role: userInfo.role })
  
  uni.showToast({
    title: `已切换到${getRoleDisplayName(userInfo.role)}`,
    icon: 'success'
  })
}

const refreshTest = () => {
  uni.showToast({
    title: '测试已刷新',
    icon: 'success'
  })
}

// 生命周期
onMounted(() => {
  console.log('权限测试页面已加载')
})
</script>

<style scoped>
.test-container {
  background-color: #f8fafc;
  min-height: 100vh;
}

.header-section {
  background: white;
  padding: 16px;
  border-bottom: 1px solid #e5e7eb;
}

.header-content {
  display: flex;
  align-items: center;
}

.back-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  margin-right: 12px;
}

.header-title {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

.user-info-section {
  background: white;
  margin: 16px;
  border-radius: 12px;
  padding: 16px;
}

.user-card {
  display: flex;
  align-items: center;
}

.user-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 16px;
}

.user-details {
  flex: 1;
}

.user-name {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  display: block;
  margin-bottom: 4px;
}

.user-role {
  margin-bottom: 4px;
}

.role-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  color: white;
}

.user-department {
  font-size: 14px;
  color: #6b7280;
}

.permission-test {
  background: white;
  margin: 16px;
  border-radius: 12px;
  padding: 16px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  display: block;
  margin-bottom: 16px;
}

.test-section {
  margin-bottom: 24px;
}

.test-title {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  display: block;
  margin-bottom: 12px;
}

.test-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.test-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #f9fafb;
  border-radius: 6px;
}

.test-name {
  font-size: 14px;
  color: #374151;
}

.test-result {
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
}

.test-result.success {
  background: #dcfce7;
  color: #10b981;
}

.test-result.error {
  background: #fee2e2;
  color: #ef4444;
}

.action-section {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.action-btn {
  padding: 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  border: none;
}

.primary-btn {
  background: #3b82f6;
  color: white;
}

.secondary-btn {
  background: #f3f4f6;
  color: #6b7280;
}
</style> 